<template>
  <div id="wutai">
    <div class="wutai">
      <div class="left">
        <div
          class="left_item"
          v-for="(item, index) in this.left_fen"
          :key="index"
        >
          <div
            class="box"
            :class="{ active: max.indexOf(item2) >= 0 ? 1 : 0 }"
            v-for="item2 in item"
            :key="item2"
            @click="dianji(item2)"
          ></div>
        </div>
      </div>
      <div class="line"></div>
      <div class="right">
        <div
          class="right_item"
          v-for="(item, index) in this.right_fen"
          :key="index"
        >
          <div
            class="box"
            :class="{ active: max.indexOf(item2) >= 0 ? 1 : 0 }"
            v-for="item2 in item"
            :key="item2"
            @click="dianji(item2)"
          ></div>
        </div>
      </div>
    </div>

    <div class="btn">
      舞台
    </div>
  </div>
</template>
  
  <script>
export default {
  name: "Wutai",
  data() {
    return {
      left_total: [
        // [1, 2, 3, 4, 5],
        // [1, 2, 3, 4, 5, 6],
        // [1, 2, 3, 4, 5, 6, 7],
      ],
      right_total: [],
      left_fen: [],
      right_fen: [],
      wutai_height: 10,
      jishu: "5",
      max: [],
      test: 0,
    };
  },
  created() {},

  destroyed() {},
  activated() {},
  mounted() {
    for (let i = 1; i <= 95; i++) {
      this.left_total.push(i);
    }
    for (let i = 96; i <= 190; i++) {
      this.right_total.push(i);
    }

    let i = 0;
    let jishu = this.jishu;

    //遍历舞台
    for (let e = 1; e <= this.wutai_height; e++) {
      let left_arr = [];
      let right_arr = [];

      for (i; i <= this.left_total.length; i++) {
        if (i > jishu - 1 || i === 95) {
          jishu = Number(jishu) + Number(this.jishu) + Number(e);
          this.left_fen.push(left_arr);
          this.right_fen.push(right_arr);
          break;
        } else {
          left_arr.push(this.left_total[i]);
          right_arr.push(this.right_total[i]);
        }
      }
    }

    // 随机分配座位
    // 本来需要vuex记录购买的座位 然后从剩余的随机找一个但现在没有登录所以就随便先找一个
    this.max.push(((Math.random() * (190 - 1 + 1)) | 0) + 1);

    // console.log('left_total',this.left_total);
    // console.log("left_fen", this.left_fen);
    // console.log(this.right_total);
  },
  methods: {
    dianji(e) {
      console.log(e);
      // max_buy

      console.log(this.max.indexOf(e));

      if (this.max.indexOf(e) != -1) {
        console.log("删除");
        this.max.splice(
          this.max.findIndex((item) => item === e),
          1
        );
      } else {
        console.log("添加");
        if (this.max.length === 5) {
          alert("最大购买数为5");
          return;
        }
        this.max.push(e);
      }
      console.log(this.max);
    },
  },
};
</script>
  
  <style scoped>
    #wutai{
      align-items: center;
      width: 100%;

    }
.wutai {
  display: flex;
  width: 100px;

}
.left {
  margin-right: 10px;
  display: flex;
  flex: 1;
  flex-direction: column-reverse;
}

.right {
  margin-left: 10px;

  display: flex;
  flex: 1;
  flex-direction: column-reverse;
}
.left_item {
  flex-direction: row-reverse;

  display: flex;
}

.right_item {
  display: flex;
}
.box {
  height: 100px;
  width: 100px;
  border: 1px solid black;
  margin: 5px;
}
.line {
  border: 1px solid black;
}

.active {
  background-color: brown;
}

.btn {
  height: 100px;
  height: 100px;
  background-color: aqua;
  text-align: center;
  font-size: 20px;
  line-height: 100px;
  margin-top: 40px;
  margin: 50px auto;
}
</style>
  
  